<template>
  <div class="view-bg" v-if="isVisible">
    <div class="close-btn btn" @click="emits('close-img')">
      <i class="iconfont icon-guanbi"></i>
    </div>
    <div class="view-img">
      <img :src="imgUrl" alt="" />
    </div>
    <div class="left-btn btn" @click="emits('left-btn')">
      <i class="iconfont icon-xiangzuo"></i>
    </div>
    <div class="right-btn btn" @click="emits('right-btn')">
      <i class="iconfont icon-xuanzeqixiayige"></i>
    </div>
    <div class="desc">
      {{ '设备名称：' + imgDesc.tagName + ' 抓拍时间：' + imgDesc.time }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { IGetDevice } from '@/type/home'
import { watch, ref } from 'vue'
const props = withDefaults(
  defineProps<{
    isVisible: boolean
    imgUrl: string
    imgDesc: IGetDevice
  }>(),
  {}
)
const emits = defineEmits<{
  (e: 'close-img'): void
  (e: 'left-btn'): void
  (e: 'right-btn'): void
}>()
const nowKey = ref<'' | 'ArrowLeft' | 'ArrowRight' | 'Escape'>('')
const handleKeyUp = () => {
  nowKey.value = ''
}
const handleKeyDown = (e: KeyboardEvent) => {
  const { key } = e
  if (key === 'Escape') {
    e.preventDefault()
    emits('close-img')
    nowKey.value = key
  }
}
watch(
  () => props.isVisible,
  () => {
    if (props.isVisible) {
      document.body.addEventListener('keydown', handleKeyDown)
      document.body.addEventListener('keyup', handleKeyUp)
    } else {
      document.body.removeEventListener('keydown', handleKeyDown)
      document.body.removeEventListener('keyup', handleKeyUp)
    }
  }
)
</script>

<style lang="scss" scoped>
.view-bg {
  user-select: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 999;

  .btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 3px solid;
    border-color: transparent;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.25s;

    i {
      color: #fff;
      line-height: 42px;
      font-size: 40px;
      font-weight: 700;
      transition: all 0.25s;
    }
    &:hover {
      border-color: #f56c6c;
      i {
        color: #f56c6c;
        font-size: 26px;
      }
    }
  }
  .close-btn {
    top: 36px;
    right: 16px;
  }
  .view-img {
    width: 80vw;
    height: 70vh;
    margin: 10vh auto 0;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(6px 10px 10px rgba(0, 0, 0, 0.7));
    }
  }
  .left-btn {
    top: 50%;
    left: 10px;
    &:hover {
      border-color: #1897ff;
      i {
        color: #1897ff;
        font-size: 26px;
      }
    }
  }
  .right-btn {
    top: 50%;
    right: 10px;
    &:hover {
      border-color: #1897ff;
      i {
        color: #1897ff;
        font-size: 26px;
      }
    }
  }
  .desc {
    position: absolute;
    width: 400px;
    height: 40px;
    background-color: #000;
    border-radius: 6px;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    filter: drop-shadow(6px 10px 10px rgba(0, 0, 0, 0.6));
  }
}
</style>
